<template>
  <div class="did-h">
    <!-- 搜索框 -->
    <div style="width: 80%; height: 100px; margin: auto; margin-top: 30px">
      <el-input id="query" placeholder="请输入内容" v-model="input3" class="input-with-select"
        @keyup.enter.native="queryDate">
        <el-select v-model="select" slot="prepend" placeholder="任务名称">
          <el-option label="任务名称" value="1"></el-option>
          <el-option label="来源" value="3"></el-option>
          <el-option label="日期" value="4"></el-option>
          <el-option label="权限等级" value="5"></el-option>
          <el-option label="操作" value="6"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="queryDate"></el-button>
      </el-input>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" ref="multipleTable" tooltip-effect="dark"
      style="width: 95%; margin: auto; text-align: center" stripe size="medium"
      :default-sort="{ prop: '', order: 'descending' }" @selection-change="handleSelectionChange">
      <el-table-column label="序号" type="index" width="80" align="center">
        <template slot-scope="scope">
          <span class="index-label">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="taskName" label="任务名称" width="150" align="center"></el-table-column>
      <el-table-column prop="uploader" label="来源" min-width="100%" align="center"></el-table-column>
      <el-table-column prop="uploadTime" label="日期" min-width="100%" sortable align="center"></el-table-column>
      <el-table-column prop="level" label="权限等级" min-width="100%" sortable align="center"></el-table-column>
      <el-table-column prop="block" label="区块高度" min-width="100%" sortable align="center"></el-table-column>
      <el-table-column prop="fileName" label="文件名称" min-width="100%" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.fileName.replace(/\.[^/.]+$/, '') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="handle" label="操作" min-width="100%" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <a href="http://localhost:8088/test.xlsx" download></a>
          <img src="../../../assets/img/jwl/downLoad.png" alt class="icon" @click="downLoad(scope.row)"
            align="center" />
          <img src="../../../assets/img/jwl/zhuanfa.png" alt class="icon" @click="zhuanfa(scope.row)" align="center" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="total" :page-size="10" @current-change="sizeChange"
      style="width: 50%; margin: auto; margin-top: 50px !important; display: flex; align-items: center; justify-content: center">
    </el-pagination>
  </div>
</template>
<script>
  import NoData from '../../../components/noData.vue';
  export default {
    created() {
      this.tacticalChainDid = this.$route.query.tacticalChainDid;
      this.tacticalId = this.$route.query.tacticalId;
      this.taskName = this.$route.query.tacticalName;
    },
    components: {
      NoData,
    },
    data() {
      return {
        input3: '',
        select: '',
        total: 1000,
        tableData: [],
        block: {
          blockHash: '',
          blockNumber: '',
          hash: '',
          signature: '',
        },
        tacticalChainDid: '',
        tacticalId: '',
        taskName: '',
      };
    },
    mounted() {
      //战术链ID 战术ID 等级权限 关键词 当前页面
      this.showChainData(1);
    },
    methods: {
      getRowClassName(row) {
        const olefilename = row.fileName;
        const lastDotIndex = olefilename.lastIndexOf('.');
        if (lastDotIndex > 0) {
          row.fileName = fileName.substring(0, lastDotIndex);
        } else {
          row.fileName;
        }
      },
      // 查询战术数据
      async queryDate(e) {
        let TaskName = document.getElementById('query').value;
        this.showChainData(this.tacticalChainDid, this.tacticalId, 6, TaskName, 1);
      },
      // 获取战术数据
      async showChainData(pageNum) {
        let formData = new FormData();
        formData.append('tacticalChainDid', this.tacticalChainDid);
        formData.append('tacticalId', this.tacticalId);
        formData.append('did', window.localStorage.getItem('userDid'));
        formData.append('taskName', this.taskName);
        formData.append('pageNum', pageNum);
        formData.append('pageSize', 10);
        try {
          let res = await this.$http.post(this.$api.tacticalChain.showChainData, formData);
          if (res.status === 200) {
            this.tableData = res.data.records; // 请求成功后将res.data赋值给tableData
            this.total = res.data.total;
            console.log(res.data);
          }
        } catch (error) {
          console.error(error);
        }
      },
      // 下载战术数据
      async downLoad(row) {
        console.log(row);
        let formData = new FormData();
        formData.append('cid', row.cid);
        formData.append('fileName', row.fileName);
        formData.append('block', row.block);
        try {
          let res = await this.$http.post(this.$api.tacticalChain.downloadChainData, formData);
          if (res.status === 200) {
            console.log(res);
            this.block = res.data.BlockInfor[0]; // 请求成功后将res.data赋值给tableData
            // 创建<a>标签
            var link = document.createElement('a');
            let url = 'http://localhost:8081/' + row.fileName;
            link.href = url;
            link.download = '';

            // 模拟点击事件
            link.click();
            this.open();
          }
        } catch (error) {
          console.error(error);
        }
      },
      // 转发战术数据
      zhuanfa(e) {
        this.$router.push({
          name: 'ipfsUpload'
        });
      },
      //切换分页
      sizeChange(e) {
        this.showChainData(100, 1, 6, '', e);
      },
      // 选择数据
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      open() {
        let str = '<div style="word-wrap: break-word;">区块hash：' + this.block.blockHash + '<br>交易hash：' + this.block
          .hash + '<br>交易签名：' + this.block.signature.signature + '</div>';
        this.$alert(str, '文件溯源信息', {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true,
          callback: (action) => {
            this.$message({
              type: 'success',
              message: '文件下载成功',
            });
          },
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      formatter(row, column) {
        return row.address;
      },
    },
  };
</script>
<style>
  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .icon {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    padding-top: 5px;
    cursor: pointer;
  }
</style>